<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 工具栏 -->
      <page-tools :show-before="true">
        <!-- 前面内容 -->
        <template v-slot:before>有 0 条考勤审批尚未处理</template>
        <template v-slot:after>
          <el-button size="small" type="primary">导入</el-button>
          <el-button size="small" type="primary">提醒</el-button>
          <el-button size="small" type="primary">设置</el-button>
          <el-button size="small" type="primary">历史归档</el-button>
          <el-button size="small" type="primary">月报报表</el-button>
        </template>
      </page-tools>
      <!-- 筛选组件 -->
      <attenTool ref="attenTool" @checkChange="checkChangeFn" />

      <el-card class="hr-block">
        <el-table :data="pageList" style="width: 100%" border>
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="username" label="姓名" width="80" />
          <el-table-column prop="workNumber" label="工号" width="60" />
          <el-table-column prop="departmentName" label="部门" width="100" />
          <el-table-column prop="mobile" label="手机号" width="180" />
          <el-table-column v-for="(item,index) in date" :key="index" :label="toDate(item.day.toString()) ">
            <template #default="{row}">
              {{ row.attendanceRecord[index].adtStatu | attendanceStr }}
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" style="height: 50px" align="middle">
          <!-- 用计算属性 -->
          <el-pagination
            layout="prev, pager, next"
            :total="filterList.length"
            :page-size="pageSetting.size"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import attenTool from './component/atten-tool.vue'
import { getAttendancesMock } from '@/api/attendances'
import enmuList from '@/api/constant/attendance'
import { getDepartments } from '@/api/departments'
export default {
  filters: {
    // filter管道符，第一个参数是要改变的参数，第二个参数是传入的参数
    attendanceStr(i) {
      if (i === 0) {
        return ''
      }
      const attenI = enmuList.holidayType.find(item => Number(item.id) === Number(i))
      return attenI ? attenI.value : '未知'
    }
  },
  components: { attenTool },
  data() {
    return {
      attenList: [],
      totalList: [],
      list: [],
      date: [],
      depts: [],
      filterList: [],
      pageSetting: {
        page: 1,
        size: 10
      }
    }
  },
  computed: {
    pageList() {
      // 之前有 bigList 一百条
      // 后面filterList 是过滤后的结果
      // 这里需要计算出每页开始和结束下标, 截取数组即可
      const endIndex = this.pageSetting.size * this.pageSetting.page
      const beginIndex = endIndex - this.pageSetting.size
      return this.filterList.slice(beginIndex, endIndex)
    }
  },
  async created() {
    const totalList = await getAttendancesMock()
    this.filterList = totalList
    this.totalList = totalList
    this.total = totalList.length
    // console.log(35, this.list)
    this.list = [...totalList].splice(0, 10)
    this.date = this.list[0].attendanceRecord
    // console.log(62, this.date)
    const { depts } = await getDepartments()
    this.depts = depts
  },
  methods: {
    async changePage(newPage) {
      this.pageSetting.page = newPage
    },
    toDate(str) {
      const year = str.slice(0, 4)
      const month = str.slice(4, 6)
      const day = str.slice(6)
      return `${year}年${month}月${day}日`
    },
    checkChangeFn() {
      // console.log(this.$refs.attenTool.depsList)
      const deptArr = this.$refs.attenTool.depsList
      const newdeptArr = []
      for (let i = 0; i < deptArr.length; i++) {
        const dept = this.depts.find(item => item.id === deptArr[i])
        newdeptArr[newdeptArr.length] = dept.name
      }
      console.log(newdeptArr)

      // 部门过滤
      let filterList
      if (newdeptArr.length === 0) {
        filterList = this.totalList
      } else {
        filterList = this.totalList.filter(user => {
          const department = user.departmentName
          return newdeptArr.includes(department)
        })
      }

      // 上面是部门过滤,
      // 下面是工作状态过滤
      // 无论哪个发生改变, 两个过滤器其实都应该放在一起考虑

      filterList = filterList.map(user => {
        return {
          ...user,
          attendanceRecord: this.convertRecord(user.attendanceRecord)
        }
      })
      this.filterList = filterList
    },
    convertRecord(oldRecord) {
      // 这里是每个员工的考勤记录数组处理办法
      // 这里 oldRecord 有 31 天数据
      // 应该进行遍历, 每天的数据如果状态码存在于选中范围内, 就显示
      // 不然就空白
      const deptStr = this.$refs.attenTool.addenBuff
      const res = oldRecord.map(item => {
        // 选择框当中是否有选中
        console.log(150, item)
        const 选择框为空 = deptStr === ''
        const 数据在选择框中 = deptStr === item.adtStatu.toString()
        return {
          ...item,
          // 如果没有选中任何值 || 如果当前记录值在选中数组中
          // 返回源数据
          // 否则返回 0
          adtStatu: 选择框为空 || 数据在选择框中 ? item.adtStatu : 0
        }
      })

      console.log(deptStr)
      console.log(res)

      return res
    }
  }
}
</script>

<style>

</style>
